<template>
  <!-- 素材库页面 -->
  <div class="materlibrary">
    <!-- head -->
    <!-- <Header></Header> -->
    <Library :data1="getMater.data1" />
    <E_commerce :data2="getMater.data2" />
    <Advertisement :data3="getMater.data3" />
    <Codemodule :data4="getMater.data4" />
  </div>
</template>
<script>
import { mater } from "@/api/index";

import Library from "@/components/Library.vue";
import E_commerce from "@/components/E_commerce.vue";
import Advertisement from "@/components/Advertisement.vue";
import Codemodule from "@/components/Codemodule.vue";

export default {
  name: "Materlibrary",
  data() {
    return {
      getMater: {
        cate1: null,
        data1: null,
        cate2: null,
        data2: null,
        cate3: null,
        data3: null,
        cate4: null,
        data4: null,
      },
    };
  },
  components: {
    Library,
    E_commerce,
    Advertisement,
    Codemodule,
  },
  methods: {
    async getMaterData() {
      await mater().then((response) => {
        const {
          cate1,
          data1,
          cate2,
          data2,
          cate3,
          data3,
          cate4,
          data4,
        } = response.data;
        this.getMater = {
          cate1: cate1,
          data1: data1,
          cate2: cate2,
          data2: data2,
          cate3: cate3,
          data3: data3,
          cate4: cate4,
          data4: data4,
        };
      });
    },
  },
  created() {
    this.getMaterData();
  },
};
</script>
